<script setup lang="ts">


import IndexSlot from "@/views/homePage/components/indexSlot.vue";
import NoMoreData from "@/views/homePage/components/noMoreData.vue";
import TopView from "@/components/search/TopView.vue";
import {getListDetail, SetPoints} from "@/api/home";
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import {showToast} from "vant";


const route = useRoute()
const articleList = ref()
const groupTitle =ref()
// console.log(route.query.GroupId)
function getListMsg() {
    getListDetail(route.query.GroupId).then(res=> {
        console.log(res.rows)
        articleList.value = res.rows
        groupTitle.value= res.rows[0].groupTitle
    })
}
getListMsg()
const router =useRouter()

function todetail(item) {
    router.push({
        path:'privatejumpdet',
        query:{
            jsArticle:item.articleId
        }
    })
}
function thumbsUp(item) {
    console.log(item)
    let obj = {
        substanceId:item.articleId
    }
    // console.log(item.articleId)
    const isLiked=ref()
    isLiked.value =true
    // console.log(item.articleId)
    // console.log(item.isLike)
    SetPoints(obj).then(res=>{
        // console.log(item.articleId)
        console.log(item.isLike)
        if ( item.isLike==0) {
            showToast('点赞成功，这个点赞已经获取积分')
            getListMsg()
        } else {
            showToast('取消点赞成功')
            getListMsg()
        }
        console.log(item)

    })
}
const showShare = ref(false);
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
];
function forward(item){
    console.log('forward')
}
</script>

<template>

    <top-view>{{groupTitle}}</top-view>
    <index-slot></index-slot>
    <div class="contentBox">
        <div class="contentList" v-for="item in articleList" :key="item.articleId">
                <div class="outside" @click="todetail(item)">
                    <div class="Box">
                        <div class="title">
                            {{item.groupTitle}}
                        </div>
                        <div class="content">
                            {{item.intro}}
                        </div>
                        <div class="BottomBox">
                            <div class="date">
                                {{item.createdTime}}
                            </div>
                            <div class="rightBox" >
                                <div class="thumbsUp" @click.stop="thumbsUp(item)" >
                                    <div v-if="!item.isLike">
                                        <img src="./images/赞gray.png" alt="">
                                    </div>
                                    <div v-else>
                                        <img src="./images/赞red.png" alt="">
                                    </div>
<!--                                    <van-icon name="thumb-circle-o" />-->
                                    {{item.likesNumber}}
                                </div>

                                <div class="forward" @click.stop="forward(item)">
                                    <div>
                                        <van-cell title="转发" @click="showShare = true" />
                                        <van-share-sheet
                                            v-model:show="showShare"
                                            title="立即分享给好友"
                                            :options="options" z-index =2000
                                        />
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>


        <no-more-data/>
    </div>
</template>
<style scoped>
.contentBox {
    margin-top: -80px;
}
.contentList {
    margin: 12px 15px;
}
.outside {
//margin: 12px 15px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    .Box {
        margin: 10px 10px;
        color: #181818;
        .title {
            font-size: 16px;
        }
        .content {
            font-size: 13px;
            color: #999999;
            margin: 15px 0 0px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow:ellipsis;
        }
        .BottomBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .date {
                font-size: 13px;
                color: #999999;
            }
            .rightBox {
                z-index: 999;
                font-size: 12px;
                width: 35%;
                display: flex;
                justify-content: space-between;
                .thumbsUp {
                    z-index: 999;
                    line-height: 44px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .forward {
                    z-index: 999;
                    margin-right: 0px;
                }
            }
        }
    }
}
</style>